<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('NewBee商城-商品详情','detail')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>

<div id="detail">
    <!-- nav -->
    <nav th:replace="mall/header::nav-fragment"></nav>

    <div class="dc">
        <div class="content w">
            <div class="title fl">商品详情</div>
            <div class="clear"></div>
        </div>
    </div>

    <div class="intro mt20 w clearfix">
        <div class="left fl" style="position: relative;">
            <div class="swiper-container fl">
                <img th:src="${goods.pic}" alt="商品图片">
            </div>
        </div>
        <div class="right fr">
            <div class="h3 ml20 mt20" th:text="${goods.name}">商品名称</div>
            <div class="sub_title mr40 ml20 mt10" th:text="${goods.description}">商品描述</div>
            <div class="item_price mr40 ml20 mt10">
                <span th:text="${#numbers.formatDecimal(goods.price, 1, 2)} + ' 元'">售价</span>
                <del th:if="${goods.markPrice != null}">
                    <span th:text="${#numbers.formatDecimal(goods.markPrice, 1, 2)} + ' 元'">原价</span>
                </del>
            </div>

            <div class="order">
                <input class="car" type="button" id="buyNowBtn" th:data-id="${goods.id}" value="立即选购"/>
                <input class="car" type="button" id="addToCartBtn" th:data-id="${goods.id}" value="加入购物车"/>
            </div>
            <div class="tb-extra ml20" id="J_tbExtra">
                <dl>
                    <dt>承诺</dt>
                    <dd><a class="J_Cont" title="满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费。" href="#"
                           target="_blank"><img th:src="@{/mall/image/7d.jpg}">7天无理由</a></dd>
                </dl>
                <dl>
                    <dt>支持</dt>
                    <dd>折旧变现，买新更省钱。<a style="float:none;text-decoration: underline;" href="##">详情</a></dd>
                </dl>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="goods mt20 w clearfix" th:text="${goods.detail}">
        商品详情内容
    </div>
</div>
<div th:replace="mall/footer::footer-fragment"></div>

<!-- jQuery -->
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script th:src="@{/mall/js/Detail.js}" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        // 监听所有商品链接点击事件，假设所有商品链接都在 #flash, #recommend 这类容器内
        // 你可以根据实际结构调整选择器
        $("#flash, #recommend, #sub_banner").on("click", "a", function(event) {
            var $link = $(this);
            var href = $link.attr("href");
            var id = $link.data("id");
            var name = $link.data("name");

            // 如果没有data-id，尝试从href中提取数字ID，假设URL是item/detail/123这种格式
            if (!id && href) {
                var match = href.match(/(\d+)/);
                if (match) {
                    id = match[1];
                }
            }

            if (!name) {
                // 如果没有data-name，可以用链接文本或空字符串
                name = $link.find(".name").text() || $link.text() || "";
            }

            var eventData = {
                productId: id || "unknown",
                productName: name || "unknown",
                timestamp: new Date().toISOString()
            };

            // 发送 Ajax 请求
            $.ajax({
                url: '/api/track/click',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(eventData),
                success: function() {
                    console.log("点击事件已发送：", eventData);
                },
                error: function(err) {
                    console.error("点击事件发送失败：", err);
                }
            });
        });
    });
</script>
</body>
</html>